<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i>会员结构图</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
			<div class="search">
				<el-row type="flex" :gutter="4">
					<el-col :span="8">
						<el-input v-model="search" placeholder="会员ID" clearable></el-input>
					</el-col>
					<el-col :span="4">
						<el-button  type="primary" @click="searchUsername" icon="el-icon-search">搜索</el-button>
					</el-col>
				</el-row>
			</div>

            <el-tree
                :props="props"
                :load="loadNode"
                :data="tree"
                lazy
                v-loading="ifload"
            >
            </el-tree>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                search: '',
                ifload:true,
                money_num:'',
                tree: [],
                props: {
                    children: 'children',
                    label: 'username',
                    id: 'member_id',
                    isLeaf:'leaf'
                }
            }
        },
        created() {

        },
        methods: {

            loadNode(node, resolve) {
                if (node.level === 0) {
                    // return resolve(this.tree);
                    console.log(node);
                }
                this.searchChild(node.data, resolve)
            },
            searchUsername() {
                this.$post_('member/member/search-member', {member_key: this.search}, (res) => {

                    this.ifload = false;
                    this.tree = res.data.map(function (item) {
                        item.username = item.username = item.member_name + ' (' + item.member_id + ')' + '(' + item.money_num + ')';
                        item.leaf = item.leaf;
                        return item;
                    });
                });
            },
            searchChild(data, resolve) {
                this.$post_('member/member/member-tree', {pid: data.member_id}, (res) => {
					console.log(res)
                    this.ifload = false;
                    return resolve(res.data.map(function (item) {
                        if(item.money_num){
                            item.username = item.member_name + ' (' + item.member_id + ')' + '(' + item.money_num + ')';

                        }else{
                            item.username = item.member_name + ' (' + item.member_id + ')';

                        }
                        item.leaf = item.leaf;
                        return item;
                    }))
                });
            }
        }
    }

</script>

<style>
    .search{
        margin-bottom: 20px;
    }

</style>
